<template>
	<div class="page-container">
		<h1>随机数生成工具</h1>
		<el-form :model="form" label-position="top">
			<el-form-item label="随机数个数">
				<el-input v-model.number="form.count" type="number" :min="1" placeholder="请输入随机数个数"></el-input>
			</el-form-item>
			<el-form-item label="随机数范围">
				<el-col :span="11">
					<el-input v-model.number="form.min" type="number" placeholder="最小值"></el-input>
				</el-col>
				<el-col :span="2" style="text-align: center;">~</el-col>
				<el-col :span="11">
					<el-input v-model.number="form.max" type="number" placeholder="最大值"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="generateRandomNumbers">生成随机数</el-button>
			</el-form-item>
		</el-form>
		<el-form label-position="top">
			<el-form-item label="输出">
				<el-input v-model="randomNumbers.join(',')" readonly></el-input>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					count: 4,
					min: 1,
					max: 100
				},
				randomNumbers: []
			};
		},
		methods: {
			generateRandomNumbers() {
				const {
					count,
					min,
					max
				} = this.form;
				let generatedNumbers = [];

				for (let i = 0; i < count; i++) {
					const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
					generatedNumbers.push(randomNumber);
				}

				this.randomNumbers = generatedNumbers;
			}
		}
	};
</script>

